<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
			}
			html{
				height: 100%;
			}
			body{
				height: 100%;
			}
			#parent{
				width: 800px;
				height: 100%;
				margin: 0px auto;
			}
			#top{
				height: 200px;
				background-color: #f44336;
				display: flex;
				flex-direction: column;
			}
			#input{
				width: 600px;
				height: 30px;
				line-height: 30px;
				font-size: 30px;
			}
			#add{
				width: 120px;
				height: 50px;
				background-color: #d9d9d9;
				text-align: center;
				line-height: 60px;
				border: #d9d9d9 7px solid;
				border-left-width: 40px;
				border-right-width: 40px;
				position: relative;
				top: -4px;
			}
			.item{
				width: 850px;
			}
			.item-div{
				display: inline-block;
				width: 750px;
				height: 50px;
				background-color: #d9d9d9;
				line-height: 50px;
				padding-left: 50px;
			}
			.close{
				position: relative;
				left: -30px;
			}
		</style>
	</head>
	<body>
		<div id="parent">
			<div id="top">
				<div style="color: white;font-size: 30px;padding-top: 50px;margin: 0px auto;">My To Do List</div>
				<div style="margin: 20px auto;"><input id="input" type="text" placeholder="Title..." /><span id="add" onclick="onAddClick()">Add</span></div>
			</div>
			<div id="bottom">
				<!-- <div class="item"><div class="item-div" style="background-color: #f9f9f9;">学习打代码</div><span class="close">X</span></div>
				<div class="item"><div class="item-div" style="background-color: #d9d9d9;">学习打代码</div><span class="close">X</span></div>
				<div class="item"><div class="item-div" style="background-color: #f9f9f9;">学习打代码</div><span class="close">X</span></div>
				<div class="item"><div class="item-div" style="background-color: #d9d9d9;">学习打代码</div><span class="close">X</span></div>
				<div class="item"><div class="item-div" style="background-color: #f9f9f9;">学习打代码</div><span class="close">X</span></div>
				<div class="item"><div class="item-div" style="background-color: #d9d9d9;">学习打代码</div><span class="close">X</span></div> -->
			</div>
		</div>
	</body>
	
	<script>
		let n=0;
		function onAddClick(){
			let input=document.getElementById("input").value;
			let innerHTML=document.getElementById("bottom").innerHTML;
			let color="";
			innerHTML=innerHTML+"<div id=\"item"+n+"\" class=\"item\"><div class=\"item-div\">"+input+"</div><span class=\"close\" onclick=\"onCloseClick("+n+")\">X</span></div>";
			document.getElementById("bottom").innerHTML=innerHTML;
			n++;
			refreshColor();
		}
		function onCloseClick(n){
			let item=document.getElementById("item"+n);
			item.remove();
			refreshColor();
		}
		
		function refreshColor(){
			let arr=document.getElementsByClassName("item-div");
			for(let i=0;i<arr.length;i++){
				if(i%2==0){
					arr[i].style.backgroundColor="#f9f9f9";
				}else{
					arr[i].style.backgroundColor="#d9d9d9";
				}
			}
		}
	</script>
</html>